<template>
  <!-- 页面布局盒子 -->
  <div class="home_box" @scroll="handelscroll">
    <!-- 文章左侧盒子 -->
    <div class="home_left_boxs">
      <a-card style="width: 100%;">
        <a-image :src='detailitem.cover || bg' style="width: 100%;height: 360px;" :fallback="bg" />
      </a-card>
      <a-card style="width: 100%;">
        <h1 class="pltitle">{{ detailitem.title }}</h1>
        <p style="text-align: center;line-height: 30px;">发布于{{ new Date(detailitem.publishAt).toLocaleString() }} ·
          阅读量{{ detailitem.views }} </p>
        <div v-html="detailitem.html">
        </div>
        <p style="text-align: center;line-height: 30px;">发布于{{ new Date(detailitem.publishAt).toLocaleString() }} |
          版权信息：非商用-署名-自由转载</p>
      </a-card>
      <div class="pltitle" id="pl">评论</div>
      <component :is="Comment"  @handelemits="handelemits"></component>
      <a-card v-for="(item,ind) in commentList" :key="ind">
        <component :is="CommentOne" :item="item"></component>
      </a-card>
    </div>

    <div class="home_right_boxs">
      <a-card title="推荐阅读" style="width: 300px">
        <div class="right_overf">
          <div class="recommend_text" v-for="item in recommendList" :key="item.id" @click="() => toarchdetail(item.id)">
            {{ item.title }} · {{ Math.abs(dayjs().diff(dayjs(item.createAt), 'day')) }}天前
          </div>
        </div>
      </a-card>
      <br />
      <a-card title="目录" style="width: 300px">

      </a-card>
    </div>
  </div>

  <component :is="Footer" :item="detailitem" @tolikes="tolikes"></component>
  <small class="scroll_top" v-show="isscroll" @click="hantop">TOP</small>
</template>
  
  <!-- -->
<script setup lang="ts">

import { ref, getCurrentInstance, ComponentInternalInstance, watch } from "vue";
//引入日期转换装置
import dayjs from 'dayjs'
//引入pinia
import { storeToRefs } from "pinia";
import { useHomes } from "../store/home";
import { useRouter } from "vue-router"
import { useRoute } from "vue-router";
import { useArchDetail } from "../store/archdetail"
import bg from "../assets/atm.jpeg"
import Comment from "../components/comment.vue"
import CommentOne from "../components/commentone.vue"
import {useDefault} from "../store/default"
import Footer from "../components/footer.vue"



let defaults = useDefault()
let archdetail = useArchDetail()
let { users } = storeToRefs(defaults)
let { detailitem, commentList } = storeToRefs(archdetail)

let handelemits = (val: any) => {
    console.log(detailitem, "detailitem")
    let obj = {
        content: val,
        email: users.value.email,
        hostId: detailitem.value.id,
        name: users.value.user,
        url: route.fullPath
    }
    // console.log(obj, "obj")
    archdetail.editcomment(obj)
    setTimeout(()=>{
        location.reload()
    },1000)
}

let router = useRouter()
//跳转详情页
let toarchdetail = (id: any) => {
  router.push("/archives/" + id)
  setTimeout(() => {
    location.reload()
  }, 600);
}



let route = useRoute()
//获取详情页数据
archdetail.getArchDetail(route.params.id)
const homes = useHomes()
let recommendList = ref([] as any);

let { CategoryList, articleListall } = storeToRefs(homes)
//获取所有文章
const { proxy } = getCurrentInstance() as ComponentInternalInstance
homes.getArtitemall()

watch(articleListall, (newval) => {
  newval.slice(0, 6).forEach((item: any, index: number) => {
    setTimeout(() => {
      recommendList.value.push(item)
      proxy!.$forceUpdate() // 通知 Vue 强制更新视图
    }, index * 300);
  })
})

watch(detailitem, (newval) => {
  document.title = newval.title
})

//滚动到顶部
let isscroll = ref(false)
let funtop = null as any;
//滚动条事件
const handelscroll = (e: any) => {
  // console.log(e.target.scrollTop,"top")
  if (e.target.scrollTop > 100) {
    isscroll.value = true
  } else {
    isscroll.value = false
  }

  funtop = () => {
    e.target.scrollTop = 0
  }
}
//点击滚动到顶部
const hantop = () => funtop();
//获取文章评论
archdetail.getcomments(route.params.id as string)



//点赞
let tolikes = (type:any) =>{
  let obj = {
    id:detailitem.value.id,
    type
  }
archdetail.setarchlikes(obj)
}
</script>
  
<style lang="scss">
.big_title {
  display: inline-flex;
  width: 50px;
  height: 50px;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  border-radius: 50%;
}









.scroll_top {
  position: fixed;
  right: 5%;
  bottom: 8%;
  background: purple;
  color: aqua;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  font-size: 30px;
}




.pltitle {
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
}

.home_box {
  height: 100vh;
  margin: 0 auto;
  overflow: auto;
  display: flex;
  justify-content: center;
  background: #f0f2f5;

  .home_left_boxs {
    flex: 1;
    min-width: 500px;
    max-width: 900px;
    margin-right: 15px;
    background: none;

  }

  .home_right_boxs {
    width: 320px;
    height: 100vh;
    background: none;
    position: sticky;
    top: 0;
    right: 0;

    .right_overf {
      width: 100%;
      overflow: hidden;
    }

    .recommend_text {
      width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      padding: 6px 0;
      animation: textrightx 0.3s;
      cursor: pointer;

      &:hover {
        color: pink;
      }
    }
  }

  &::-webkit-scrollbar {
    display: none;
  }
}


//隐藏滚动条
html::-webkit-scrollbar {
  display: none;
}

.right_tag {
  width: 100%;
  overflow: hidden;

  div {
    width: 100%;
    padding: 3px 10px;
    margin: 5px;
    display: flex;
    justify-content: space-between;

    small {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    span {
      width: 40%;
      flex-shrink: 0;
    }

    animation: textrightx 0.3s;
    cursor: pointer;

    &:hover {
      color: pink;
    }
  }
}

@keyframes textrightx {
  0% {
    transform: translate(-100%);
  }

  100% {
    transform: translate(0);
  }
}
</style>